<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon routes">
              <el-icon><Connection /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.routeCount }}</div>
              <div class="stats-label">路由总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon templates">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.templateCount }}</div>
              <div class="stats-label">模板总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
                        <el-col :span="6">
                    <el-card class="stats-card">
                      <div class="stats-content">
                        <div class="stats-icon logs">
                          <el-icon><List /></el-icon>
                        </div>
                        <div class="stats-info">
                          <div class="stats-number">{{ stats.logCount }}</div>
                          <div class="stats-label">今日日志</div>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card class="stats-card">
                      <div class="stats-content">
                        <div class="stats-icon events">
                          <el-icon><Bell /></el-icon>
                        </div>
                        <div class="stats-info">
                          <div class="stats-number">{{ stats.eventCount }}</div>
                          <div class="stats-label">事件总数</div>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
    </el-row>

    <!-- 最近日志 -->
    <el-card class="recent-logs">
      <template #header>
        <div class="card-header">
          <span>最近API调用日志</span>
          <el-button type="primary" size="small" @click="refreshLogs">刷新</el-button>
        </div>
      </template>
      
      <el-table :data="recentLogs" style="width: 100%" v-loading="loading">
        <el-table-column prop="createdAt" label="时间" width="180">
          <template #default="scope">
            {{ formatTime(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="requestMethod" label="方法" width="80">
          <template #default="scope">
            <el-tag :type="getMethodTagType(scope.row.requestMethod)" size="small">
              {{ scope.row.requestMethod }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="requestPath" label="路径" />
        <el-table-column prop="responseStatus" label="状态码" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.responseStatus)" size="small">
              {{ scope.row.responseStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="responseTimeMs" label="响应时间" width="120">
          <template #default="scope">
            {{ scope.row.responseTimeMs }}ms
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { logApi, systemApi } from '@/api'
import { Connection, Document, List, Bell } from '@element-plus/icons-vue'

export default {
  name: 'Dashboard',
  components: {
    Connection,
    Document,
    List,
    Bell
  },
  setup() {
            const stats = ref({
          routeCount: 0,
          templateCount: 0,
          logCount: 0,
          eventCount: 0
        })
    
    const recentLogs = ref([])
    const loading = ref(false)

    // 获取统计数据
    const fetchStats = async () => {
      try {
        const response = await systemApi.getSystemInfo()
        console.log('统计数据响应:', response)
        if (response.code === 0) {
          stats.value.routeCount = response.data.routeCount || 0
          stats.value.templateCount = response.data.templateCount || 0
          stats.value.logCount = response.data.logCount || 0
          stats.value.eventCount = response.data.eventCount || 0
        } else {
          console.error('获取统计数据失败:', response.message)
        }
      } catch (error) {
        console.error('获取统计数据失败:', error)
      }
    }

    // 获取最近日志
    const loadRecentLogs = async () => {
      try {
        const response = await logApi.getLogs({ page: 1, size: 10 })
        console.log('最近日志响应:', response)
        if (response.code === 0) {
          recentLogs.value = response.data.records || []
        } else {
          console.error('获取最近日志失败:', response.message)
        }
      } catch (error) {
        console.error('获取最近日志失败:', error)
      }
    }

    // 刷新日志
    const refreshLogs = () => {
      loadRecentLogs()
    }

    // 格式化时间
    const formatTime = (timestamp) => {
      if (!timestamp) return '-'
      try {
        return new Date(timestamp).toLocaleString('zh-CN')
      } catch (error) {
        console.error('时间格式化失败:', error)
        return '-'
      }
    }

    // 获取方法标签类型
    const getMethodTagType = (method) => {
      const typeMap = {
        GET: 'success',
        POST: 'primary',
        PUT: 'warning',
        DELETE: 'danger'
      }
      return typeMap[method] || 'info'
    }

    // 获取状态码标签类型
    const getStatusTagType = (statusCode) => {
      if (statusCode >= 200 && statusCode < 300) return 'success'
      if (statusCode >= 400 && statusCode < 500) return 'warning'
      if (statusCode >= 500) return 'danger'
      return 'info'
    }

    onMounted(() => {
      fetchStats()
      loadRecentLogs()
    })

    return {
      stats,
      recentLogs,
      loading,
      refreshLogs,
      formatTime,
      getMethodTagType,
      getStatusTagType
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  height: 120px;
}

.stats-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
}

.stats-icon.routes {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stats-icon.templates {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}



.stats-icon.logs {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stats-icon.events {
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
}

.stats-info {
  flex: 1;
}

.stats-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stats-label {
  font-size: 14px;
  color: #909399;
}

.recent-logs {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 